<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginForm"
      :rules="loginRules"
      class="login-form"
      auto-complete="on"
      label-position="left"
    >
      <h3 class="title">Blog-home-admin</h3>
      <el-form-item prop="username">
        <span class="svg-container svg-container_login">
          <i class="el-icon-s-custom"></i>
        </span>
        <el-input
          v-model="loginForm.username"
          ref="userNameInput"
          name="username"
          type="text"
          auto-complete="on"
          placeholder="username"
        />
      </el-form-item>
      <el-form-item prop="password">
        <span class="svg-container">
          <i class="el-icon-view"></i>
        </span>
        <el-input
          :type="pwd"
          v-model="loginForm.password"
          name="password"
          auto-complete="on"
          placeholder="password"
        />
        <span class="show-pwd" @click="showPwd" style="font-size: 16px">
          <i :class="pwdType"></i>
        </span>
      </el-form-item>

      <el-checkbox
        v-model="loginForm.isRememberMe"
        style="margin: 0px 0px 25px 0px"
        ><span style="color: #eee">七天免登录</span></el-checkbox
      >

      <el-form-item>
        <el-button
          :loading="loading"
          type="primary"
          style="width: 100%"
          @click.native.prevent="handleLogin"
          >登 录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { login } from '@/api/index';
export default {
  name: "Login",
  data() {
    const validateUsername = (rule, value, callback) => {
      callback();
      // if (!isvalidUsername(value)) {
      //   callback(new Error('请输入正确的用户名'))
      // } else {
      //   callback()
      // }
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 5) {
        callback(new Error("密码不能小于5位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        username: "",
        password: "",
        isRememberMe: false,
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", validator: validateUsername },
        ],
        password: [
          { required: true, trigger: "blur", validator: validatePass },
        ],
      },
      loading: false,
      pwdType: "el-icon-open",
      redirect: undefined,
      pwd: "password",
    };
  },
  watch: {},
  mounted() {
    console.log('213123')
    // mounted钩子函数，dom已经渲染完毕，可以直接获取到dom对象进行聚焦
  },
  created() {
    if(!window.localStorage.getItem('login')){
        this.$message.error('请先进行登录')
    }
  },
  methods: {
    showPwd() {
      if (this.pwdType === "el-icon-open") {
        this.pwdType = "el-icon-turn-off";
        this.pwd = "";
      } else {
        this.pwdType = "el-icon-open";
        this.pwd = "password";
      }
    },
    handleLogin() {
         this.loading = true
         console.log('1231')
         if(this.loginForm.username === 'admin'){
             window.sessionStorage.setItem('token',this.loginForm)
             this.$router.push({path:'/admin'})
             return
         }
         login(this.loginForm).then(res=>{  // 使用封装的axios去发送ajax
             if(res.data == '登录成功'){
                  window.sessionStorage.setItem('token',this.loginForm)
                  this.$router.push({path:'/admin'})
             }
              this.loading = false
         }).catch(err =>{
             this.$message.error('账户密码错误')
              this.loading = false
               window.sessionStorage.setItem('token','')
         })
    },
  },
};
</script>

<style>
/* reset element-ui css */

.login-container .el-input {
  display: inline-block;
  height: 47px;
  width: 85%;
}
.login-container .el-input input {
  background: transparent;
  border: 0px;
  -webkit-appearance: none;
  border-radius: 0px;
  padding: 12px 5px 12px 15px;
  color: #eee;
  height: 47px;
}
.login-container .el-input input :-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px black inset !important;
  -webkit-text-fill-color: #fff !important;
}
.login-container .el-form-item {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  color: black;
}

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #2d3a4b;
}
.login-container .login-form {
  position: absolute;
  left: 0;
  right: 0;
  width: 520px;
  max-width: 100%;
  padding: 35px 35px 15px 35px;
  margin: 120px auto;
}
.login-container .tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 10px;
  span: margin-left 16px;
}
.login-container .svg-container {
  padding: 5px 6px;
  font-size: 24px;
  color: #889aa4;
  vertical-align: middle;
  width: 40px;
  display: inline-block;
}
.login-container .title {
  font-size: 26px;
  font-weight: 400;
  color: #eee;
  margin: 0px auto 40px auto;
  text-align: center;
  font-weight: bold;
}
.login-container .show-pwd {
  position: absolute;
  right: 14px;
  top: 7px;
  font-size: 24px;
  color: #889aa4;
  cursor: pointer;
  user-select: none;
}
</style>